import {
  Button,
  Col,
  Form,
  Input,
  Row,
  Select,
  theme,
  Space,
  DatePicker,
  Alert,
} from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);

const AdvancedSearchForm = (props) => {
  const navigate = useNavigate();
  const { changeSetData, getAllOrderInfo } = props;
  const [isShowErr, setIsShowErr] = useState(false);
  const [dateFlag, setDataFlag] = useState(new Date()); //给日历组件设置key值，重置时，改变key值，让日历组件重新加载，达到重置目的
  const { Option } = Select; // ---表单的内容
  const { RangePicker } = DatePicker;
  const { token } = theme.useToken();
  const [form] = Form.useForm();
  const formStyle = {
    maxWidth: "none",
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 10,
  };
  //筛选表单的数据
  const [searchFrom, setSearchFrom] = useState({});
  let orderTime = [];
  //时间选择器的回调
  const onChange = (dates, dateStrings) => {
    orderTime = dateStrings;
  };

  // 点击筛选后的数据及请求
  const onFinish = (values) => {
    values.startTime = orderTime[0];
    values.endTime = orderTime[1];
    let { keywords, orderState, startTime, endTime } = values;
    //直接传values会报错-------TypeError: Converting circular structure to JSON是因为存在循环引用
    if (
      keywords != undefined ||
      orderState != undefined ||
      startTime != undefined
    ) {
      changeSetData({ keywords, orderState, startTime, endTime });
    } else {
      setIsShowErr(true);
      let time = setTimeout(() => {
        setIsShowErr(false);
        clearTimeout(time);
      }, 4000);
    }
  };
  // 添加
  const add = () => {
    navigate("/index/editOrder");
  };
  return (
    <Form
      form={form}
      name="advanced_search"
      style={formStyle}
      onFinish={onFinish}
      initialValues={searchFrom}
    >
      <Row gutter={22}>
        <Col span={6}>
          <Form.Item
            name="orderState" //初始化动态变得数据
            label="订单状态"
          >
            {/* <Input placeholder="placeholder" /> */}
            <Select>
              <Option value={0}>待付款</Option>
              <Option value={1}>待确认</Option>
              <Option value={2}>待发货</Option>
              <Option value={3}>已发货</Option>
              <Option value={4}>已完成</Option>
              <Option value={5}>待处理</Option>
              <Option value={6}>已取消</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="keywords" label="关键词">
            <Input placeholder="请输入手机号" />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="下单时间">
            <Space direction="vertical" size={12}>
              <RangePicker onChange={onChange} key={dateFlag} />
            </Space>
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col span={22}>
          <Button
            type="primary"
            style={{
              margin: "0 0.8rem",
            }}
            onClick={() => {
              add();
            }}
          >
            添加
          </Button>
          <Button type="primary" htmlType="submit">
            筛选
          </Button>

          <Button
            style={{
              margin: "0 .8rem",
            }}
            onClick={() => {
              form.resetFields();
              setDataFlag(new Date());
              orderTime = [];
              getAllOrderInfo();
            }}
          >
            重置
          </Button>
          {isShowErr ? (
            <div
              style={{
                width: "200px",
                display: "inline-block",
                height: "30px",
              }}
            >
              <Alert message="请选择筛选条件" type="error" banner="true" />
            </div>
          ) : null}
        </Col>
      </Row>
    </Form>
  );
};
export default AdvancedSearchForm;
